<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <hr>
        <child-one></child-one>
    </div>
</body>
<script type="text/x-template" id="one">
    <div class="box">
        <h3>子组件范围</h3>
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
    </div>
</script>
<script>
    // vue全局静态数据仓库定义方式 Vue.observable(params)
    //      params 为常规vue实例构建时的data数据仓库的定义模式
    //      该方式会在调用时，使用 vue data 数据仓库劫持功能相似方式进行数据劫持转换
    //      并返回该对象
    
    //  独立数据监控对象在实际使用时，是通过vue实例的计算属性进行调用的
    //  配置Vue的 mixin 混合技术实习代码定义简化
    const obs = Vue.observable({
        msg:"测试数据",
        arr:[1,2,3,4],
        user:{
            name:"tom"
        }
    });

    // console.log(obs);
    Vue.component("ChildOne",{
        template:"#one",
        // data(){
        //     return obs
        // },
        computed:{
            // msg(){
            //     return obs.msg
            // }
            msg:{
                get(){
                    return obs.msg;
                },
                set(nv){
                    obs.msg = nv;
                }
            }
        }
    })

    new Vue({
        el:"#app",
        // data:obs
        data:{
            info:"当前组件独立的info"
        },
        computed:{
            // msg(){
            //     return obs.msg
            // }
            msg:{
                get(){
                    return obs.msg;
                },
                set(nv){
                    obs.msg = nv;
                }
            }
        }
    })
</script>
</html>